// 轮播图管理
import { DeleteOutlined } from '@ant-design/icons';
import { Space, Table, Image, Switch, Popconfirm, Button, Row, message, Input, Checkbox, Modal } from 'antd';
import React, { useEffect, useState } from 'react';
import { delBanner, getBanner, postimg, putBanner } from '../../apis/user';

type BannerProps = {}

export const AddBanner = (props: BannerProps) => {
  const { Column } = Table;
  // 页码
  const [current, setCurrent] = useState(1) 
  // 每页显示个数
  const [pageSize, setPageSize] = useState(6) 
  // 定义轮播图
  const [Banner,SetBanner]=useState()
  // 获取轮播图数据
  useEffect(()=>{
    getBanner().then(result=>{
      SetBanner((result as any).data)
    })
  },[])
  // 添加数据事件
  // 定义相关信息
  const [alt, setAlt] = useState<string>('')
  // 定义url
  const [url, setUrl] = useState('')
  // 获取图片url值
  const getImgUrl = () => {
    const img = document.getElementById('img') as HTMLInputElement
    const files = img && img.files
    const file = files && files[0]
    const reader = new FileReader()
    reader.readAsDataURL(file!)
    reader.onload = function () {
      setUrl(this.result!.toString())
    }
  }
   // 弹窗事件
   const [isModalOpen, setIsModalOpen] = useState(false);
  //  关闭事件
   const showModal = () => {
     setIsModalOpen(true);
   };
  //  提交事件
   const handleOk = () => {
     if (alt === '' || url === '') {
       message.error('请先完成表单输入')
       return
     }
     console.log(url,alt)
     let state = true
     let data = { "img":url,"message":alt,"state":state }
     postimg(data).then(rew=>{
      // 重新请求数据
      getBanner().then(result=>{
        SetBanner((result as any).data)
      })
     })

     setAlt("")
     setUrl("")

     setIsModalOpen(false);
   };
  //  取消事件
   const handleCancel = () => {
    setAlt("")
    setUrl("")
    setIsModalOpen(false);
   };
  return(
      <>
         <Button type="primary" onClick={showModal}>添加轮播图</Button>
        <Table dataSource={Banner} pagination={{current,pageSize,
          onChange(page, pageSize) {
            setCurrent(page)
            setPageSize(pageSize)
          }
        }}>
          <Column align="center" title="序号"   render={(text, record, index) => { return <span>{ (current - 1) * pageSize + index + 1 }</span>}}/>
          <Column align="center" title="图片" dataIndex="img" render={(img) => { return <Image src={img} width={150} height={75} /> }}/>
          <Column align="center" title="相关信息" dataIndex="message"/>
          <Column
            align="center"
            title="操作"
            render={(text, record, index) => (
              <Space size="middle">
                <Switch checkedChildren="展示" unCheckedChildren="关闭" defaultChecked={(record as any).state}
                // 开关事件
                  onChange={(any)=>{
                    // 修改state值
                    (record as any).state = !(record as any).state
                    putBanner((record as any).id,(record as any)).then((res:any) =>{ 
                      
                    })
                  }}
                  
                />
                <Popconfirm
                    title="确定删除吗?"
                    onConfirm={() => {
                      // 进行删除
                      delBanner((record as any).id).then(res => {
                        // 重新请求数据
                        getBanner().then(result=>{
                          SetBanner((result as any).data)
                        })
                      })
                    }}
                    onCancel={() => { }}
                    okText="确定"
                    cancelText="再想想"
                  >
                    <Button danger shape="circle" icon={<DeleteOutlined />} />
                  </Popconfirm>
              </Space>
            )}
          />
        </Table>
        <Modal title="添加轮播图" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText={"取消"} okText={"添加"}>
          <Space direction='vertical'>
              <Input placeholder='相关信息' value={ alt } onChange = { e=> setAlt(e.target.value) }/>
              <Input type="file" id='img' onChange={ getImgUrl }/>
              <div>
                预览图片:
                <Image src={ url } width = { 300 } />
              </div>
          </Space>
        </Modal>
      </>
  );
}